<script setup lang="ts">
import ChatEditor from "./ChatEditor.vue";
import Conversition from "../class/Conversition";
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
import store from "../store/index";

provide: {
  store;
}
const editor = ref(null);

function changeText(data: string) {
  // store.setPropName("sendInfo", data);
}

// 切换表情包
function changeExpression() {
  store.setPropName("expressionShow", !store.state.expressionShow);
}

// 选择表情
function selectIcon(icon: string) {
  store.setPropName("expressionShow", !store.state.expressionShow);
  let iconContent = `<img src='${icon}' style='height:30px;width:30px;vertical-align: middle;display:inline-block' />`;
  editor.value.setIconContent(iconContent);
}

function blurHighLight(data: string) {
  // 这里做数据过滤或样式变更操作
  store.setPropName("sendInfo", data);
}

//发送图片
function sendImage(e: any) {
  const fileObj = e.target.files[0];

  if (fileObj != null) {
    if (!/image\/\w+/.test(fileObj.type)) {
      return alert("请选择图片文件!");
    }
    var fd = new FormData();
    fd.append("file", fileObj);
    if (fileObj.size > 1024 * 1024 * 10) {
      return alert("上传图片不能超过10M!");
    } else {
      let reader = new FileReader();
      reader.readAsDataURL(fileObj);
      reader.onload = (event: any) => {
        sendVerify(event.target.result, 1);
        proxy.$refs.referenceUpload.value = null;
      };
    }
  }
}
// 发送校验
function sendVerify(content: string, type: number) {
  let noCode = +new Date() + "";
  let conversition = new Conversition(
    store.state.sender.Id,
    store.state.reciver.Id,
    content,
    type,
    0,
    noCode,
    "",
    "",
    "",
    "",
    "",
    false,
    store.state.sender.Avatar
  );
  if (store.state.socket == null) {
    store.tipMsg("socket实例为空");
    return;
  }
  store.sendLocal(conversition);
  store.sendInfo(conversition);
}
</script>

<template>
  <footer class="footer">
    <!--工具栏-->
    <div class="foot-top">
      <ul>
        <li @click="changeExpression()" class="iconfont icon-biaoqing"></li>
        <li
          class="iconfont icon-tupian"
          @click="store.state.expressionShow = false"
        >
          <input
            ref="referenceUpload"
            class="file-image"
            name="customerService"
            type="file"
            value=""
            v-on:change="sendImage"
          />
        </li>
      </ul>
    </div>
    <!--表情包-->
    <div v-show="store.state.expressionShow" class="emjon">
      <n-scrollbar style="max-height: 100%">
        <ul>
          <li
            v-for="item in store.state.expressions"
            :key="item.title"
            :title="item.title"
          >
            <img :src="item.icon" @click="selectIcon(item.icon)" />
          </li>
        </ul>
      </n-scrollbar>
    </div>
    <!-- <chat-editor
      ref="editor"
      v-model="store.state.sendInfo"
      @changeText="changeText"
      @blurFunc="blurHighLight"
      :value="store.state.sendInfo"
    ></chat-editor> -->
    <chat-editor
      v-model="store.state.sendInfo"
      ref="editor"
      id="chatEditor"
      :height="135"
      class="answer-editor"
      placeholder=" "
    ></chat-editor>
  </footer>
</template>

<style scoped lang="less">
.footer {
  height: 35%;
  padding: 0 20px;
  width: 100%;
  background-color: #fff;
  position: relative;
  .foot-top {
    width: 100%;
    height: 25%;
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: -webkit-box;
      -webkit-box-orient: horizontal;
    }
    li {
      margin: 5px 10px;
      font-size: 25px !important;
      position: relative;
    }
    .file-image {
      margin-top: 5px;
      z-index: 1;
      position: absolute;
      opacity: 0;
      bottom: 0px;
      left: 0px;
      height: 40px;
      width: 25px;
    }
  }
  .emjon {
    width: 350px;
    height: 245px;
    position: absolute;
    left: 30px;
    top: -262px;
    background: #fff;
    box-shadow: 2px 2px 4px #888888;
    overflow: auto;
    border-top-left-radius: 14px;
    border-bottom-right-radius: 14px;
    ul {
      padding: 10px;
      display: flex;
      flex-wrap: wrap;
      li {
        width: 55px;
        font-size: 28px !important;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      li:hover {
        box-shadow: 0px 0px 5px #ccc;
        transform: scale(1.2);
      }
      img {
        width: 30px;
        height: 30px;
      }
    }
  }
}
</style>
